<template>
	<div class="header_container">
      <el-container>
        <el-header>
        	<div>
        		<img src="../../assets/img/logo.png"/>
        	</div>
        		<ul>
        			<li><a href="javascript:" ><li class="icon iconfont icon-geren6"></li></a><span>用户：admin</span></li>
        			<li><a href="javascript:" ><li class="icon iconfont icon-shouye"></li></a><span>系统首页</span></li>
        			<li><a href="javascript:" ><li class="icon iconfont icon-shuaxin-copy"></li></a><span>刷新</span></li>
        			<li><a href="javascript:" ><li class="icon iconfont icon-saoba"></li></a><span>清除缓存</span></li>
        			<li><a href="javascript:" ><li class="icon iconfont  icon-xiaoxi-copy"></li></a><span>信息</span></li>
        			<li><a href="javascript:" ><li class="icon iconfont  icon-tuichu1"></li></a><span>退出</span></li>
        		</ul>
        </el-header>
        <el-container>
          <el-aside width="210px">
              <el-col :span="12">
                  <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color=" #242536"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    width="185px">
                    <el-submenu index="1">
                      <template slot="title">
                        <i class="icon iconfont el-icon-document">&nbsp;&nbsp;</i>
                        <span>&nbsp;订单管理</span>
                      </template>
                      <el-menu-item-group>
                        <el-menu-item index="1-1">订单列表</el-menu-item>
                        <el-menu-item index="1-2">入驻商订单列表</el-menu-item>
                        <el-menu-item index="1-3">发货单列表</el-menu-item>
                        <el-menu-item index="1-4">服务单列表</el-menu-item>
                        <el-menu-item index="1-5">快递单列表</el-menu-item>
                        <el-menu-item index="1-6">广告管理&nbsp;</el-menu-item>
                      </el-menu-item-group>
                      <el-submenu index="1-7"  >
                        <template slot="title" >快递单历史&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</template>
                        <el-menu-item index="1-7-1">订单导出</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                      <i class="el-icon-menu">&nbsp;&nbsp;</i>
                      <span slot="title">商品管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" >
                      <i class="icon iconfont icon-shangjia">&nbsp;&nbsp;</i>
                      <span slot="title">商家管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <i class="icon iconfont icon-guanggao">&nbsp;&nbsp;</i>
                      <span slot="title">广告管理</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                      <i class="icon iconfont icon-huiyuan">&nbsp;&nbsp;</i>
                      <span slot="title">会员管理</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                      <i class="icon iconfont icon-permissions">&nbsp;&nbsp;</i>
                      <span slot="title">权限管理</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                      <i class="icon iconfont icon-yuangongpaizhong">&nbsp;&nbsp;</i>
                      <span slot="title">员工管理</span>
                    </el-menu-item>
                    <el-menu-item index="8">
                      <i class="icon iconfont icon-kaoqinbiao">&nbsp;&nbsp;</i>
                      <span slot="title">员工考勤</span>
                    </el-menu-item>
                  </el-menu>
              </el-col>
          </el-aside>

          <!--Main-->

          <el-main>
              <div class="locallist">
                <span class="icon iconfont icon-techreport-"></span>
                <pre> 您当前的位置：首页>订单管理>快递单历史</pre>
                <span>2018年04月01日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:00&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;星期一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              </div>
               <div class="menusearch">
                  <div class="demo-input-size">
                     <a class=" icon iconfont icon-iconsousuo" style="display:inline; margin:16px 0px 16px 50px;" ></a>
                    <el-input
                      size="mini"
                      placeholder="快递单号"
                      suffix-icon="el-icon-date"
                      v-model="input6">
                    </el-input>
                    <el-input
                      size="mini"
                      placeholder="快递员"
                      suffix-icon="el-icon-date"
                      v-model="input7">
                    </el-input>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;选择区域</span>
                    <el-select v-model="value4" clearable placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button type="success">搜索</el-button>
                  </div>
              </div>
               <div class="kuaidilist">
                     <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        type="selection"
                        width="130%" >
                        </el-table-column>
                        <el-table-column
                          prop="sers"
                          label="快递单序列号"
                          width="180%">
                        </el-table-column>
                        <el-table-column
                          prop="date"
                          label="下单时间"
                          width="220%">
                        </el-table-column>
                        <el-table-column
                          prop="addser"
                          label="发件人"
                          width="160%">
                        </el-table-column>
                        <el-table-column
                          prop="recipients"
                          label="收件人"
                          width="180%">
                        </el-table-column>
                        <el-table-column
                          prop="time"
                          label="完成时间"
                          width="220%">
                        </el-table-column>
                        <el-table-column
                          prop="money"
                          label="金额"
                          width="156%">
                        </el-table-column>
                        <el-table-column
                          prop="state"
                          label="快递状态"
                          width="180%">
                        </el-table-column>
                        <el-table-column
                          prop="courier"
                          label="快递员"
                          width="220%">
                        </el-table-column>
                        <el-table-column
                          label="操作"
                          width="180%">
                          <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small" class="icon iconfont icon-bianji"></el-button>
                            <el-button type="text" size="small" class="icon iconfont icon-iconfontshanchu1"></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="sub_on">
                          <el-pagination
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page.sync="currentPage1"
                              :page-size="100"
                              layout="total, prev, pager, next"
                              :total="1000">
                            </el-pagination>
                      </div>
              </div>
               <div class="footer">
                    <span>梵响数据&nbsp;&nbsp;长租公寓数字化服务商&nbsp;&nbsp;&nbsp;Copyright © 2018 梵响数据 &nbsp;&nbsp;版权所有</span>
              </div>
          </el-main>
        </el-container>
      </el-container>
	</div>
</template>
<script>

    export default {
    	data(){
    		return {
          input6: '',
          input7: '',

          options: [{
            value: '选项1',
            label: '西  安'
          }, {
            value: '选项2',
            label: '厦  门'
          }, {
            value: '选项3',
            label: '海   南'
          }, {
            value: '选项4',
            label: '巴拿马'
          }, {
            value: '选项5',
            label: '丽   江'
          }],
          value4: '',
          tableData:[{
          sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
          sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
          sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
          sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
          sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
        }, {
           sers:'2567890',
          date:'2016.05.03 18:00',
          addser: '张晓娟',
          recipients: '张大鹏',
          time: '2018.08.30 18:00',
          money: '80',
          state:'已寄出 未寄出',
          courier: 200333
          }, {
            sers:'2567890',
            date:'2016.05.03 18:00',
            addser: '张晓娟',
            recipients: '张大鹏',
            time: '2018.08.30 18:00',
            money: '80',
            state:'已寄出 未寄出',
            courier: 200333}, {
            sers:'2567890',
            date:'2016.05.03 18:00',
            addser: '张晓娟',
            recipients: '张大鹏',
            time: '2018.08.30 18:00',
            money: '80',
            state:'已寄出 未寄出',
            courier: 200333}, {
            sers:'2567890',
            date:'2016.05.03 18:00',
            addser: '张晓娟',
            recipients: '张大鹏',
            time: '2018.08.30 18:00',
            money: '80',
            state:'已寄出 未寄出',
            courier: 200333}
        ],
         multipleSelection: [],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
        }
      },
    	created(){

    	},
    	computed: {

    	},
  		methods: {
       handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClick(row) {
          console.log(row);
        },
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

		}
    }
</script>
<style  lang="scss">
   .header_container{
   	width:100% !important;
   	height:1170px !important;
   }

/*header*/

   .el-header{
    background-color: #242536;
    text-align: center;
    height:65px!important;
    display:flex;
    flex-direction:row;
     justify-content:flex-end;
     	div{
	     	width:201px;
	     	height:64px;
		     	img{
		   		width:170px;
		   		height:25px;
		   		margin:19px 0px 19px 0px;
		   		}
    	}
    	ul{
    	  display: flex;
	      justify-content:flex-end;
        margin:9px 2% 0px 67%;
	      line-height:23px;

	      li{
	      		margin-left:2px;
		        a{
		        	color:white;
		          	i{

		            	font-size:12px;
		          	}
		        }
		        span{
		          font-size: 10px;
		          color:white;
		          margin-left:18px;
		        }
		      }
          li:last-child{
            margin-left:23px;
          }
          span:last-child{
            margin-left:23px;
          }

        }
 	}

  .icon-geren6{
	  color:white;
  }


  /*aside*/

  .el-aside {
    background-color: #242536;
    color: #333;
    text-align: center;
    line-height: 900px;
    height:1167px!important;
  }
  el-col-12{
    width:100%!important;
    height:900px!important;
  }
  .el-menu-item:focus, .el-menu-item:hover{
  background-color:#22b2a9 !important;
  }

  .el-submenu__title:focus,.el-submenu__title:hover{
    background-color:#22b2a9 !important;

  }


/*main*/
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }

  body > .el-container {
    height:1170px !important;
    line-height:1170px;
    margin-bottom:0px;
  }
  .el-main{
  padding:0px;
  margin:0px;
  }
  .locallist{
  width:100%;
  height:30px;
  background-color:white;
    span{
    line-height:25px;
    margin-left:17px;
    }
    pre{
    color:black;
    font-size:10px;
    display:inline;
    }
  }
  .locallist span:last-child{
    color:black;
    font-size:10px;
    display:flex;
    justify-content:flex-end;
    margin-top:-23px;

    }
  .el-button--success, .el-button--success{
   background-color:#22b2a9 !important;
  }
  .el-button--success:focus, .el-button--success:hover{
   background-color:#10c3b8 !important;
  }
  .menusearch{
    width:100%;
    height:60px;
    background-color:#E9EEF3;

  }
  .el-input{
  width:200px !important;
  }
  .demo-input-size{
  width:100%;
  height:43px;
  line-height:43px;
  margin-top:15px;
  //border:1px solid #9cb2c8;
  background-color:#E9EEF3;
    div{
    margin:15px auto 15px;
    text-align:left !important;
     margin:0px 0px 0px 20px;
      span{
        font-size:12px;
        color:black;
        margin-left:220px;
      }
    }
  }
  .el-select .el-input--suffix{
  width:120px !important;
  height:30px !important;
  margin-left:-10px;
  }
  .el-input__inner{
    height:30px !important;
  }
  .el-select-dropdown el-popper{
  margin-left:810px;
  }
   .el-button--success{
   width:70px!important;
   height:30px!important;
   padding-top:8px;
    }

  .kuaidilist{
    width:100%;
    height:1032px;
  }
  .el-table{
    width:96% !important;
    height:87%;
    margin:0 auto;
  }
  .cell{
  text-align:center;
  }


  .sub_on{
    width:100%;
    height:50px;
    margin:30px auto 30px;
    display:flex;
    justify-content:center;
    background-color:#E9EEF3;
    div{
        width:420px;
        margin:12px 10px 15px;
    }
  }
  .el-pagination .btn-next, .el-pagination .btn-prev{
background-color:#E9EEF3 !important;
  }
   .el-pager li{
  background-color: #E9EEF3!important;
  }
  /*边框色*/
.el-table--border, .el-table--group{
  border:solid 1px #E8E8E8;

}

/*底部*/
  .footer{
    width:100%;
    height:30px;
    line-height:30px;
    background-color: #242536;
    span{
      color:white;
      font-size:10px;
      display:flex;
      justify-content:center;

    }
  }



</style>
